<template>
	<view class="accommodation">
		<view class="header">
			住宿类型
		</view>
		<scroll-view class="viewScroll" :scroll-x="true" scroll-y="false">
			<view class="scroll-box">
				<view class="accommodation-card" v-for="(item,index) in accommodationTypeInfo" :key="index" @click="showDetail(item)">
					<view class="Model">
						<text>DAY</text>
						{{index + 1}}
					</view>
					<image
						:src="imageUrl + item.hotel_img.split(',')[0]"
						mode="aspectFill"></image>
					<view class="description">
						<text>{{item.hotel_title}}</text>
						<view class="xiaozi">
							{{item.hotel_descr}}
						</view>
					</view>
					<view class="arrow-icon">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="tips">
			Tips:如遇到酒店/名宿满房，则安排其他同级别住宿
		</view>
		<!-- <view class="click-tips">
			点击上面的住宿卡片打开查看住宿详情
		</view> -->

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-content" v-if="currentHotel">
				<view class="popup-header">
					<text class="popup-title">{{currentHotel.hotel_title}}</text>
					<text class="close-btn" @click="closePopup">×</text>
				</view>
				<swiper class="popup-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(img, index) in currentHotelImages" :key="index">
						<image :src="imageUrl + img" mode="aspectFill" class="popup-image"></image>
					</swiper-item>
				</swiper>
				<view class="popup-desc">
					{{currentHotel.hotel_descr}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { imageUrl } from '../../../config/request/request';
	import { ref, computed } from 'vue';
	
	const popup = ref(null);
	const currentHotel = ref(null);
	const currentHotelImages = computed(() => {
		if (!currentHotel.value) return [];
		return currentHotel.value.hotel_img.split(',').filter(img => img);
	});
	
	const props = defineProps({
		accommodationTypeInfo: {
			type: Array,
			default:[]
		}
	})

	const showDetail = (item) => {
		currentHotel.value = item;
		popup.value.open();
	}

	const closePopup = () => {
		popup.value.close();
	}
</script>

<style scoped>
	.header {
		font-size: 34rpx;
		padding: 0 10rpx;
	}

	.viewScroll {
		padding: 20rpx 0 20rpx 20rpx;
		width: 748rpx;
		box-sizing: border-box;
	}

	.scroll-box {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		padding-bottom: 20rpx;
		padding-right: 40rpx;
	}

	.accommodation {
		font-family: "仓耳渔阳体 W05";
		width: 100%;
		margin: 20rpx 0;
	}

	.accommodation-card {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		margin-right: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		white-space: pre-line;
		gap: 20rpx;
		border-radius: 24rpx;
		padding: 30rpx;
		width: 620rpx;
		height: 240rpx;
		position: relative;
		cursor: pointer;
	}

	.accommodation-card:active {
		opacity: 0.8;
	}

	.Model {
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 12rpx 10rpx 0;
		border-right: 1rpx dashed rgba(191, 191, 191, 1);
		height: 100%;
		min-width: 60rpx;
	}

	.Model text {
		font-size: 24rpx;
		margin-bottom: 2rpx;
	}

	.accommodation-card image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 12rpx;
		object-fit: cover;
	}

	.description {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10rpx 0;
		max-width: 280rpx;
		overflow: hidden;
	}

	.arrow-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		/* padding-left: 10rpx; */
	}

	.description text {
		font-size: 32rpx;
		color: rgba(0, 0, 0, 1);
		font-weight: 500;
		margin-bottom: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	.xiaozi {
		font-size: 24rpx;
		color: rgba(125, 125, 125, 1);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		width: 100%;
		word-break: break-all;
		white-space: normal;
	}

	.tips {
		padding: 0rpx 20rpx;
		font-size: 24rpx;
		color: rgba(128, 128, 128, 1);
	}

	.click-tips {
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		color: rgba(128, 128, 128, 1);
		text-align: center;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx;
		width: 680rpx;
		max-height: 80vh;
		padding: 30rpx;
		margin: 0 20rpx;
		overflow-y: auto;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: 500;
	}

	.close-btn {
		font-size: 48rpx;
		color: #666;
		padding: 0 20rpx;
	}

	.popup-swiper {
		width: 100%;
		height: 400rpx;
		margin-bottom: 20rpx;
	}

	.popup-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		object-fit: cover;
	}

	.popup-desc {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		padding: 10rpx 0;
	}
</style>